<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">通知公告</text>
		</view>
		
		<!-- 分类选择 -->
		<view class="category-section">
			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-list">
					<view 
						class="category-item" 
						:class="{'active': currentCategory === ''}"
						@click="switchCategory('')"
					>
						全部
					</view>
					<view 
						class="category-item" 
						:class="{'active': currentCategory === category}"
						v-for="(category, index) in categories" 
						:key="index"
						@click="switchCategory(category)"
					>
						{{category}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 公告列表 -->
		<view class="notice-list">
			<view v-if="loading" class="loading-box">
				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
			</view>
			<block v-else>
				<view 
					class="notice-item" 
					v-for="(item, index) in notices" 
					:key="index"
					@click="navigateToDetail(item._id)"
				>
					<view class="notice-content">
						<view class="notice-title">{{item.title}}</view>
						<view class="notice-summary" v-if="item.summary">{{item.summary}}</view>
						<view class="notice-info">
							<text class="notice-category" v-if="item.category">{{item.category}}</text>
							<text class="notice-date">{{formatDate(item.publishDate)}}</text>
							<text class="notice-views" v-if="item.viewCount !== undefined">
								<text class="icon">👁</text> {{item.viewCount}}
							</text>
							<text class="notice-banner" v-if="item.showInBanner">
								<text class="icon">🏆</text> 轮播展示
							</text>
						</view>
					</view>
				</view>
				
				<!-- 无数据提示 -->
				<view v-if="notices.length === 0" class="empty-box">
					<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
					<text class="empty-text">暂无公告</text>
				</view>
				
				<!-- 加载更多 -->
				<uni-load-more v-if="notices.length > 0" :status="loadMoreStatus" :content-text="loadingText" @clickLoadMore="loadMore"></uni-load-more>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				notices: [],
				currentCategory: '',
				categories: ['赛事通知', '培训通知', '考试通知', '其他通知'],
				page: 1,
				limit: 10,
				total: 0,
				loadMoreStatus: 'more',
				loadingText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.getNotices();
		},
		onPullDownRefresh() {
			this.refreshList();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			// 获取公告列表
			async getNotices() {
				this.loading = true;
				
				try {
					const noticeService = uniCloud.importObject('notice-service');
					const res = await noticeService.getNotices({
						page: this.page,
						limit: this.limit,
						category: this.currentCategory || undefined
					});
					
					if (res.code === 0) {
							if (this.page === 1) {
							this.notices = res.data || [];
							} else {
							this.notices = [...this.notices, ...(res.data || [])];
							}
							
						this.total = res.total || 0;
							
							// 判断是否还有更多数据
							if (this.notices.length >= this.total) {
								this.loadMoreStatus = 'noMore';
							} else {
								this.loadMoreStatus = 'more';
							}
						} else {
							uni.showToast({
							title: res.message || '获取公告列表失败',
								icon: 'none'
							});
						}
				} catch (err) {
						console.error('获取公告列表失败', err);
						uni.showToast({
							title: '网络错误，请稍后再试',
							icon: 'none'
						});
				} finally {
						this.loading = false;
						uni.stopPullDownRefresh();
					}
			},
			
			// 切换分类
			switchCategory(category) {
				if (this.currentCategory === category) return;
				
				this.currentCategory = category;
				this.page = 1;
				this.notices = [];
				this.getNotices();
			},
			
			// 加载更多
			loadMore() {
				if (this.loadMoreStatus === 'noMore' || this.loading) return;
				
				this.page++;
				this.getNotices();
			},
			
			// 刷新列表
			refreshList() {
				this.page = 1;
				this.notices = [];
				this.getNotices();
			},
			
			// 跳转到详情页
			navigateToDetail(id) {
				if (!id) return;
				
				uni.navigateTo({
					url: `/pages/notice/notice-detail?id=${id}`
				});
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
.container {
	padding-bottom: 30rpx;
}

.page-header {
	padding: 30rpx;
	background-color: #fff;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.category-section {
	padding: 20rpx 0;
	background-color: #fff;
	margin-bottom: 20rpx;
}

.category-scroll {
	white-space: nowrap;
}

.category-list {
	padding: 0 20rpx;
	display: flex;
}

.category-item {
	padding: 10rpx 30rpx;
	margin-right: 20rpx;
	font-size: 28rpx;
	color: #666;
	background-color: #f5f5f5;
	border-radius: 30rpx;
}

.category-item.active {
	background-color: #007AFF;
	color: #fff;
}

.notice-list {
	padding: 0 20rpx;
}

.notice-item {
	margin-bottom: 20rpx;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.notice-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	line-height: 1.4;
}

.notice-summary {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.notice-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 24rpx;
	color: #999;
}

.notice-category, .notice-date, .notice-views, .notice-banner {
	margin-right: 20rpx;
}

.notice-banner {
	color: #ff9900;
}

.notice-views .icon, .notice-banner .icon {
	margin-right: 4rpx;
}

.empty-box {
	padding: 100rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.loading-box {
	padding: 30rpx 0;
}
</style> 